<template>
	<view class="rank-list">
		<view v-for="(student, index) in scores" :key="student.name" class="rank-item">
			<text class="rank-num">{{ index + 1 }}</text> <!-- 显示排名 -->
			<text class="student-name">{{ student.name }}</text> <!-- 显示学生姓名 -->
			<text class="student-score">{{ student.score }}</text> <!-- 显示学生成绩 -->
		</view>
	</view>
</template>

<script>
	// 假设这是你从后端API获取到的成绩数据  
	// let scores = [{
	// 		name: 'Alice',
	// 		score: 92
	// 	},
	// 	{
	// 		name: 'Bob',
	// 		score: 85
	// 	},
	// 	{
	// 		name: 'Charlie',
	// 		score: 95
	// 	},
	// 	// ... 其他学生数据  
	// ];
	// 对成绩进行降序排序  
	// scores.sort((a, b) => b.score - a.score);
	export default {
		data() {
			return {
				scores: [
					// 这里应该是从后端获取到的数据  
					{
						name: 'Alice',
						score: 92
					},
					{
						name: 'Bob',
						score: 85
					},
					{
						name: 'Charlie',
						score: 95
					},
				],
			};
		},
		// 如果数据是异步获取的，你可能需要在mounted或created生命周期钩子中调用API  
		// ... 
		created() {
			// this.fetchScores();
			this.scores.sort((a, b) => b.score - a.score);
		},
		methods: {
			fetchScores() {
				// 假设你有一个获取成绩的API  
				// uni.request({
				// 	url: 'https://your-backend-api.com/scores',
				// 	success: (res) => {
				// 		this.scores = res.data;
				// 	}
				// });
			}
		}
	};
</script>

<style>
	.rank-list {
		/* 列表样式 */
	}

	.rank-item {
		/* 单个排行项的样式 */
		display: flex;
		align-items: center;
		/* 其他样式 */
	}

	.rank-num,
	.student-name,
	.student-score {
		/* 排名、姓名、成绩的样式 */
		margin-right: 10px;
		/* 示例，根据实际需求调整 */
	}
</style>